<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .container {
            width: 1000px;
            background-color: white;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .first {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: rgb(96, 173, 175);
            border: 10px double rgb(63, 115, 145);
            overflow: hidden;
            text-align: center;
            padding-top: 27px;
            margin-left: 165px;
        }
        /* .A{
            margin-left: 200px;
            vertical-align: middle;
        }*/
        
        p {
            margin-top: 20px;
            text-align: center;
            font: bold 17px Helvetica;
        }
        
        .second {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: rgb(96, 173, 175);
            border: 10px double rgb(63, 115, 145);
            text-align: center;
            padding-top: 27px;
            margin-left: 40px;
            overflow: hidden;
        }
        /* .B {
            margin-left: 200px;
        }*/
        
        .third {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: rgb(96, 173, 175);
            border: 10px double rgb(63, 115, 145);
            text-align: center;
            padding-top: 27px;
            margin-left: 165px;
            margin-top: 40px;
            overflow: hidden;
        }
        /*.C {
            margin-top: 500px;
        }*/
        
        .forth {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: rgb(96, 173, 175);
            border: 10px double rgb(63, 115, 145);
            text-align: center;
            padding-top: 27px;
            margin-left: 40px;
            margin-top: 40px;
            overflow: hidden;
        }
        /* .D {
            margin-top: 500px;
        }*/
    </style>
</head>

<body>
    <div class="container">
        <h1>角落故事</h1>

        <div class="first">
            <img class="A" src="一把剪刀.jpg" width="200px" height="200px">
            <h2>一把剪刀</h2>
        </div>
        <div class="second">
            <img class="B" src="一台缝纫机.jpg" width="200px" height="200px">
            <h2>一台缝纫机</h2>
        </div>
        <br>
        <div class="third">
            <img class="C" src="一碗甜水面.jpg" width="200px" height="200px">
            <h2>一碗甜水面</h2>
        </div>
        <div class="forth">
            <img class="D" src="一台机床 .jpg" width="200px" height="200px">
            <h2>一台机床</h2>
        </div>
    </div>
</body>

</html>